<template>
 <div style="height: 100%">

  <div class="search-con search-con-top">
      <!-- <div class="fl">
        <Select v-model="condition.typeid" clearable placeholder="请选择类型" class="search-col" @on-change="change1" style="width:200px">
          <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select v-model="condition.bid" clearable placeholder="请选择商家" class="search-col" @on-change="change3" style="width:200px">
          <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
        </Select>
        <Input clearable placeholder="输入商户名称搜索" class="search-input" v-model="condition.name"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div> -->
       <Input clearable placeholder="活动标题" class="search-input" v-model="search.title"/>
       <Button class="search-btn" type="primary" @click="getActivityList">搜索</Button>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="creatNew">新建活动</Button>
      </div>
    </div>
    <tables ref="tables"  :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="changePageSize" @pageNum="changePageNum"/>

    <Modal
        :styles="{top: '40px'}"
        :width="800"
        title="新建活动"
        v-model="show"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="cancel()"
        class-name="vertical-center-modal">
        <Form ref="activity" :model="activity" :rules="ruleValidate" :label-width="110">
          <FormItem label="标题" prop="title">
              <Input v-model="activity.title" placeholder="请输入标题"></Input>
          </FormItem>
          <FormItem label="活动封面" prop="img">
            <div class="demo-upload-list"  v-if="activity.img">
                <img :src="activity.img">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(activity.img)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                </div>
            </div>
            <Upload v-else
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                action="http://59.110.234.118:9100/uploadImgs/upload?path=admin/other"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                </div>
            </Upload>
            <Modal title="图片查看" v-model="previmg">
                <img :src="activity.img" v-if="previmg" style="width: 100%">
            </Modal>
          </FormItem>
          <FormItem prop="content" label="活动内容" v-if="show">
              <wangeditor ref="wangeditor" :catchData="quillchange" :editorContent="activity.content"></wangeditor>
          </FormItem>
          <FormItem label="推广链接" prop="num">
              <Select v-model="activity.type" class="search-150 pin-selsect" clearable>
                <Option :value='1'>领点金券</Option>
                <Option :value='2'>加盟店</Option>
                <Option :value='3'>租赁点 </Option>
                <Option :value='4'>商品</Option>
              </Select>
              <!-- <Input  v-model="activity.type" v-if="activity.type == 1" placeholder="请输入数量" style="width:150px"></Input> -->
              <!-- 点金券 -->
              <Select v-model="activity.busId" v-if="activity.type==1" placeholder="选择点金券" class="search-150 pin-selsect" clearable>
                <Option :value='item.cid' v-for="(item,index) in couponList" :key="item.cid">{{item.name}}</Option>
              </Select>
              <!-- 加盟店 -->
              <Select v-model="activity.busId" v-if="activity.type==2" placeholder="选择加盟店" class="search-150 pin-selsect" clearable>
                <Option :value='item.bid' v-for="(item,index) in goodsStore" :key="item.bid">{{item.name}}</Option>
              </Select>
              <!-- 租赁点 -->
              <Select v-model="activity.busId" v-if="activity.type==3" placeholder="选择租赁点" class="search-150 pin-selsect" clearable>
                <Option :value='item.bid' v-for="(item,index) in leaseStore" :key="item.bid">{{item.name}}</Option>
              </Select>
              <!-- 商品 -->
              <Select v-model="activity.busId" v-if="activity.type==4" placeholder="选择商品" class="search-150 pin-selsect" clearable>
                <Option :value='item.gid' v-for="(item,index) in goodsList" :key="item.gid">{{item.name}}</Option>
              </Select>
          </FormItem>
          <FormItem prop="content" label="活动状态">
            <Select v-model="activity.status" class="search-150 pin-selsect" >
                <Option :value='1'>开启</Option>
                <Option :value='0'>禁用</Option>
            </Select>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel()">取消</Button>
        <Button type="primary" size="large" @click="checkForm()">确定</Button>
      </div>
    </Modal>

 </div>
</template>

<script>
 import wangeditor from '../components/editor/wangeditor'
 import Tables from "_c/tables";
 import { getAllStores,getAllGoods,getAllCoupon ,saveActivity,getAllActivity,deleteActivity} from '../../api/data'

 export default {
   components: {
     wangeditor,
     tables: Tables
   },
   data () {
     return {
       show:false,
       previmg:false,
       activity:{
           title:'',
           img:'',
           content:'',
           type:'',
           busId:'',
           status:'1'
       },
       goodsStore:[],
       leaseStore:[],
       goodsList:[],
       couponList:[],
       ruleValidate:{
          title: [
            {
              required: true,
              message: "标题不能为空",
              trigger: "blur"
            }
          ],
          img: [
            {
              required: true,
              message: "封面不能为空",
              trigger: "blur"
            }
          ],
          content: [
            {
              required: true,
              message: "内容不能为空",
              trigger: "blur"
            }
          ],
          status:[
            {
              required: true,
              message: "状态不能为空",
              trigger: "blur"
            }
          ]
       },
        columns: [
          {
            type: "index",
            width: 60,
            align: "center",
            key: ""
          },
          {
            title: "活动标题",
            key: "title"
          },
          {
            title: "创建时间",
            key: "createtm"
          },
          {
            title: "状态",
            key: "status",
            render: (h, params) => {
              let text = ''
              let item = params.row
              switch (item.status) {
                case 1:
                  text = '开启'
                  break;
                case  0:
                  text = '禁用'
                  break;
                default:
                  break;
              }
              return h("div",text);
            }
          },
          {
            title: "链接类型",
            key: "type",
            render: (h, params) => {
              let text = ''
              let item = params.row
              switch (item.type) {
                case 1:
                  text = '领点金券'
                  break;
                case 2:
                  text = '加盟店'
                  break;
                case 3:
                  text = '租赁点'
                  break;
                case 4:
                  text = '商品'
                  break;
                default:
                  break;
              }
              return h("div",text);
            }
          },
          {
            title: '操作',
            key: 'handle',
            button: [
              (h, params, vm) => {
                return [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                        marginBottom: "5px"
                      },
                      on: {
                        click: () => {
                          this.activity = JSON.parse(JSON.stringify(params.row))
                          this.show = true
                          // this.edit(params.row.id)

                        }
                      }
                    },
                    "编辑"
                  )
                ];
              },
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        this.deleteActi(params.row.id);
                      }
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        },
                        style: {
                          marginRight: "5px",
                      marginBottom: "5px"
                        }
                      },
                      "删除"
                    )
                  ]
                );
              }
          ]
        },

      ],
       editor:'',
      // table数据
      tableData: [],
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      search:{
        title:''
      }
     }
   },
   mounted () {
     this.getStores()
     this.getGoods()
     this.getCoupon()
     this.getActivityList()
    //  this.initEditor()
   },
   methods: {
     quillchange(e){
       this.activity.content = e;
     },
     getActivityList(){
       getAllActivity({
         pageNum:this.page.current,
         pageSize:this.page.pageSize,
         title:this.search.title
       }).then(res=>{
         this.tableData = res.data.data
         this.page.total = res.data.total
       })
     },
     getStores(){
       getAllStores({status:1}).then(res=>{
          let data = res.data
          data.forEach(item => {
            if(item.category == 0){//租赁点
               this.leaseStore.push(item)
            }else if(item.category == 1){//商户
              this.goodsStore.push(item)
            }
          });
       })
    },
    getGoods(){
      getAllGoods({status:1}).then(res=>{
        this.goodsList = res.data
      })
    },
    getCoupon(){
      getAllCoupon({status:1}).then(res=>{
           this.couponList = res.data
      })
    },
     handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件超出2M范围"
      });
    },
     changePageSize(val){
          this.page.pageSize = val
          this.getActivityList()
     },
     changePageNum(val){
          this.page.current = val
          this.getActivityList()
     },
     deleteActi(id){
          deleteActivity({id}).then(res=>{
            if(res.code == 1){
               this.$Message.success('删除成功!');
               this.getActivityList()
            }
          })
     },
     cancel(){
         this.show = false
         this.activity =
             {
                  title:'',
                  img:'',
                  content:'',
                  type:'',
                  busId:'',
                  status:'1'
              }
         this.$set(this.activity,'img','')
         this.$set(this.activity,'content','')
         this.$set(this.activity,'type','')
         this.$set(this.activity,'busId','')

     },
     checkForm(){
        this.$refs['activity'].validate((valid) => {
              if (valid) {
                  this.save()
              } else {
                  this.$Message.error('请填写完整!');
              }
          })
     },
     save(){
       if(this.activity.type && !this.activity.busId){
           this.$Message.error('请填写完整!');
           return
       }
       saveActivity(this.activity).then(res=>{
         if(res.code == 1){
             this.$Message.success('保存成功!');
             this.$refs['activity'].resetFields()
             this.cancel()
             this.getActivityList()
         }

       })
     },
     creatNew(){
       this.show = true
     },
     handleSuccess(res, file) {
       this.activity.img = res.data;
    },
    handleView() {
      this.previmg = true;
    },
    handleRemove() {
      this.$set(this.activity,'img','')
    }

   },

 }
</script>

<style>
.search-150{
  width: 150px;
}

</style>
